
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <title>Element Plus Layout with ECharts</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }
      #app {
        display: flex;
        flex-direction: column;
        height: 100vh;
      }
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        height: 60px;
        background-color: #409EFF;
        color: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
      }
      .main-content {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 10px;
        padding: 10px;
        overflow: auto;
      }
      .chart-container {
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        padding: 10px;
      }
      .footer {
        height: 50px;
        background-color: #409EFF;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- Top Section -->
      <div class="header">
        <div class="header-left">
          <h2>Dashboard</h2>
        </div>
        <div class="header-right">
          <el-dropdown>
            <span class="el-dropdown-link">
              Menu<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>Option 1</el-dropdown-item>
                <el-dropdown-item>Option 2</el-dropdown-item>
                <el-dropdown-item>Option 3</el-dropdown-item>
                <el-dropdown-item divided>Logout</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      
      <!-- Middle Section - 9 Grid with Charts -->
      <div class="main-content">
        <div class="chart-container" ref="chart1"></div>
        <div class="chart-container" ref="chart2"></div>
        <div class="chart-container" ref="chart3"></div>
        <div class="chart-container" ref="chart4"></div>
        <div class="chart-container" ref="chart5"></div>
        <div class="chart-container" ref="chart6"></div>
        <div class="chart-container" ref="chart7"></div>
        <div class="chart-container" ref="chart8"></div>
        <div class="chart-container" ref="chart9"></div>
      </div>
      
      <!-- Bottom Section -->
      <div class="footer">
        <span>© 2023 Element Plus Dashboard. All rights reserved.</span>
      </div>
    </div>
    
    <script>
      const App = {
        data() {
          return {
            charts: []
          };
        },
        mounted() {
          // Initialize all charts
          this.initChart1();
          this.initChart2();
          this.initChart3();
          this.initChart4();
          this.initChart5();
          this.initChart6();
          this.initChart7();
          this.initChart8();
          this.initChart9();
        },
        methods: {
          initChart1() {
            const chart = echarts.init(this.$refs.chart1);
            chart.setOption({
              title: { text: 'Line Chart' },
              tooltip: {},
              xAxis: {
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {},
              series: [{
                name: 'Sales',
                type: 'line',
                data: [5, 20, 36, 10, 10, 20, 15]
              }]
            });
            this.charts.push(chart);
          },
          initChart2() {
            const chart = echarts.init(this.$refs.chart2);
            chart.setOption({
              title: { text: 'Bar Chart' },
              tooltip: {},
              xAxis: {
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {},
              series: [{
                name: 'Sales',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20, 15]
              }]
            });
            this.charts.push(chart);
          },
          initChart3() {
            const chart = echarts.init(this.$refs.chart3);
            chart.setOption({
              title: { text: 'Pie Chart' },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                top: '5%',
                left: 'center'
              },
              series: [
                {
                  name: 'Access From',
                  type: 'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                  },
                  label: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: '18',
                      fontWeight: 'bold'
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                  ]
                }
              ]
            });
            this.charts.push(chart);
          },
          initChart4() {
            const chart = echarts.init(this.$refs.chart4);
            chart.setOption({
              title: { text: 'Scatter Chart' },
              xAxis: {},
              yAxis: {},
              series: [{
                symbolSize: 20,
                data: [
                  [10.0, 8.04],
                  [8.0, 6.95],
                  [13.0, 7.58],
                  [9.0, 8.81],
                  [11.0, 8.33],
                  [14.0, 9.96],
                  [6.0, 7.24],
                  [4.0, 4.26],
                  [12.0, 10.84],
                  [7.0, 4.82],
                  [5.0, 5.68]
                ],
                type: 'scatter'
              }]
            });
            this.charts.push(chart);
          },
          initChart5() {
            const chart = echarts.init(this.$refs.chart5);
            chart.setOption({
              title: { text: 'Radar Chart' },
              legend: {
                data: ['Allocated Budget', 'Actual Spending']
              },
              radar: {
                indicator: [
                  { name: 'Sales', max: 6500 },
                  { name: 'Administration', max: 16000 },
                  { name: 'Information Technology', max: 30000 },
                  { name: 'Customer Support', max: 38000 },
                  { name: 'Development', max: 52000 },
                  { name: 'Marketing', max: 25000 }
                ]
              },
              series: [{
                name: 'Budget vs spending',
                type: 'radar',
                data: [
                  {
                    value: [4200, 3000, 20000, 35000, 50000, 18000],
                    name: 'Allocated Budget'
                  },
                  {
                    value: [5000, 14000, 28000, 26000, 42000, 21000],
                    name: 'Actual Spending'
                  }
                ]
              }]
            });
            this.charts.push(chart);
          },
          initChart6() {
            const chart = echarts.init(this.$refs.chart6);
            chart.setOption({
              title: { text: 'Gauge Chart' },
              series: [
                {
                  type: 'gauge',
                  progress: {
                    show: true,
                    width: 18
                  },
                  axisLine: {
                    lineStyle: {
                      width: 18
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  splitLine: {
                    length: 15,
                    lineStyle: {
                      width: 2,
                      color: '#999'
                    }
                  },
                  axisLabel: {
                    distance: 25,
                    color: '#999',
                    fontSize: 12
                  },
                  anchor: {
                    show: true,
                    showAbove: true,
                    size: 25,
                    itemStyle: {
                      borderWidth: 10
                    }
                  },
                  detail: {
                    valueAnimation: true,
                    fontSize: 20,
                    offsetCenter: [0, '70%']
                  },
                  data: [
                    {
                      value: 70
                    }
                  ]
                }
              ]
            });
            this.charts.push(chart);
          },
          initChart7() {
            const chart = echarts.init(this.$refs.chart7);
            chart.setOption({
              title: { text: 'Funnel Chart' },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}%'
              },
              toolbox: {
                feature: {
                  dataView: { readOnly: false },
                  restore: {},
                  saveAsImage: {}
                }
              },
              legend: {
                data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
              },
              series: [
                {
                  name: 'Funnel',
                  type: 'funnel',
                  left: '10%',
                  top: 60,
                  bottom: 60,
                  width: '80%',
                  min: 0,
                  max: 100,
                  minSize: '0%',
                  maxSize: '100%',
                  sort: 'descending',
                  gap: 2,
                  label: {
                    show: true,
                    position: 'inside'
                  },
                  labelLine: {
                    length: 10,
                    lineStyle: {
                      width: 1,
                      type: 'solid'
                    }
                  },
                  itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                  },
                  emphasis: {
                    label: {
                      fontSize: 20
                    }
                  },
                  data: [
                    { value: 60, name: 'Visit' },
                    { value: 40, name: 'Inquiry' },
                    { value: 20, name: 'Order' },
                    { value: 80, name: 'Click' },
                    { value: 100, name: 'Show' }
                  ]
                }
              ]
            });
            this.charts.push(chart);
          },
          initChart8() {
            const chart = echarts.init(this.$refs.chart8);
            chart.setOption({
              title: { text: 'Heatmap' },
              tooltip: {
                position: 'top'
              },
              grid: {
                height: '80%',
                top: '10%'
              },
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                splitArea: {
                  show: true
                }
              },
              yAxis: {
                type: 'category',
                data: ['Morning', 'Afternoon', 'Evening'],
                splitArea: {
                  show: true
                }
              },
              visualMap: {
                min: 0,
                max: 10,
                calculable: true,
                orient: 'horizontal',
                left: 'center',
                bottom: '0%'
              },
              series: [{
                name: 'Punch Card',
                type: 'heatmap',
                data: [
                  [0, 0, 5], [1, 0, 7], [2, 0, 3], [3, 0, 5], [4, 0, 8], [5, 0, 4], [6, 0, 6],
                  [0, 1, 7], [1, 1, 6], [2, 1, 9], [3, 1, 4], [4, 1, 7], [5, 1, 3], [6, 1, 2],
                  [0, 2, 1], [1, 2, 2], [2, 2, 3], [3, 2, 1], [4, 2, 5], [5, 2, 8], [6, 2, 2]
                ],
                label: {
                  show: false
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }]
            });
            this.charts.push(chart);
          },
          initChart9() {
            const chart = echarts.init(this.$refs.chart9);
            chart.setOption({
              title: { text: 'Theme River' },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'line',
                  lineStyle: {
                    color: 'rgba(0,0,0,0.2)',
                    width: 1,
                    type: 'solid'
                  }
                }
              },
              legend: {
                data: ['Topic 1', 'Topic 2', 'Topic 3', 'Topic 4', 'Topic 5', 'Topic 6']
              },
              singleAxis: {
                top: 50,
                bottom: 50,
                axisTick: {},
                axisLabel: {},
                type: 'time',
                axisPointer: {
                  animation: true,
                  label: {
                    show: true
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    opacity: 0.2
                  }
                }
              },
              series: [
                {
                  type: 'themeRiver',
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 20,
                      shadowColor: 'rgba(0, 0, 0, 0.8)'
                    }
                  },
                  data: [
                    ['2015/11/08', 10, 'Topic 1'],
                    ['2015/11/09', 15, 'Topic 1'],
                    ['2015/11/10', 35, 'Topic 1'],
                    ['2015/11/11', 38, 'Topic 1'],
                    ['2015/11/12', 22, 'Topic 1'],
                    ['2015/11/13', 16, 'Topic 1'],
                    ['2015/11/14', 7, 'Topic 1'],
                    ['2015/11/15', 2, 'Topic 1'],
                    ['2015/11/16', 17, 'Topic 1'],
                    ['2015/11/17', 33, 'Topic 1'],
                    ['2015/11/18', 40, 'Topic 1'],
                    ['2015/11/19', 32, 'Topic 1'],
                    ['2015/11/20', 26, 'Topic 1'],
                    ['2015/11/21', 35, 'Topic 1'],
                    ['2015/11/22', 40, 'Topic 1'],
                    ['2015/11/23', 32, 'Topic 1'],
                    ['2015/11/24', 26, 'Topic 1'],
                    ['2015/11/25', 22, 'Topic 1'],
                    ['2015/11/26', 16, 'Topic 1'],
                    ['2015/11/27', 22, 'Topic 1'],
                    ['2015/11/28', 10, 'Topic 1'],
                    ['2015/11/08', 35, 'Topic 2'],
                    ['2015/11/09', 36, 'Topic 2'],
                    ['2015/11/10', 37, 'Topic 2'],
                    ['2015/11/11', 22, 'Topic 2'],
                    ['2015/11/12', 24, 'Topic 2'],
                    ['2015/11/13', 26, 'Topic 2'],
                    ['2015/11/14', 34, 'Topic 2'],
                    ['2015/11/15', 21, 'Topic 2'],
                    ['2015/11/16', 18, 'Topic 2'],
                    ['2015/11/17', 45, 'Topic 2'],
                    ['2015/11/18', 32, 'Topic 2'],
                    ['2015/11/19', 35, 'Topic 2'],
                    ['2015/11/20', 30, 'Topic 2'],
                    ['2015/11/21', 28, 'Topic 2'],
                    ['2015/11/22', 27, 'Topic 2'],
                    ['2015/11/23', 26, 'Topic 2'],
                    ['2015/11/24', 15, 'Topic 2'],
                    ['2015/11/25', 30, 'Topic 2'],
                    ['2015/11/26', 35, 'Topic 2'],
                    ['2015/11/27', 42, 'Topic 2'],
                    ['2015/11/28', 42, 'Topic 2'],
                    ['2015/11/08', 21, 'Topic 3'],
                    ['2015/11/09', 25, 'Topic 3'],
                    ['2015/11/10', 27, 'Topic 3'],
                    ['2015/11/11', 23, 'Topic 3'],
                    ['2015/11/12', 24, 'Topic 3'],
                    ['2015/11/13', 21, 'Topic 3'],
                    ['2015/11/14', 35, 'Topic 3'],
                    ['2015/11/15', 39, 'Topic 3'],
                    ['2015/11/16', 40, 'Topic 3'],
                    ['2015/11/17', 36, 'Topic 3'],
                    ['2015/11/18', 33, 'Topic 3'],
                    ['2015/11/19', 43, 'Topic 3'],
                    ['2015/11/20', 40, 'Topic 3'],
                    ['2015/11/21', 34, 'Topic 3'],
                    ['2015/11/22', 28, 'Topic 3'],
                    ['2015/11/23', 26, 'Topic 3'],
                    ['2015/11/24', 37, 'Topic 3'],
                    ['2015/11/25', 41, 'Topic 3'],
                    ['2015/11/26', 46, 'Topic 3'],
                    ['2015/11/27', 47, 'Topic 3'],
                    ['2015/11/28', 41, 'Topic 3'],
                    ['2015/11/08', 10, 'Topic 4'],
                    ['2015/11/09', 15, 'Topic 4'],
                    ['2015/11/10', 35, 'Topic 4'],
                    ['2015/11/11', 38, 'Topic 4'],
                    ['2015/11/12', 22, 'Topic 4'],
                    ['2015/11/13', 16, 'Topic 4'],
                    ['2015/11/14', 7, 'Topic 4'],
                    ['2015/11/15', 2, 'Topic 4'],
                    ['2015/11/16', 17, 'Topic 4'],
                    ['2015/11/17', 33, 'Topic 4'],
                    ['2015/11/18', 40, 'Topic 4'],
                    ['2015/11/19', 32, 'Topic 4'],
                    ['2015/11/20', 26, 'Topic 4'],
                    ['2015/11/21', 35, 'Topic 4'],
                    ['2015/11/22', 40, 'Topic 4'],
                    ['2015/11/23', 32, 'Topic 4'],
                    ['2015/11/24', 26, 'Topic 4'],
                    ['2015/11/25', 22, 'Topic 4'],
                    ['2015/11/26', 16, 'Topic 4'],
                    ['2015/11/27', 22, 'Topic 4'],
                    ['2015/11/28', 10, 'Topic 4'],
                    ['2015/11/08', 10, 'Topic 5'],
                    ['2015/11/09', 15, 'Topic 5'],
                    ['2015/11/10', 35, 'Topic 5'],
                    ['2015/11/11', 38, 'Topic 5'],
                    ['2015/11/12', 22, 'Topic 5'],
                    ['2015/11/13', 16, 'Topic 5'],
                    ['2015/11/14', 7, 'Topic 5'],
                    ['2015/11/15', 2, 'Topic 5'],
                    ['2015/11/16', 17, 'Topic 5'],
                    ['2015/11/17', 33, 'Topic 5'],
                    ['2015/11/18', 40, 'Topic 5'],
                    ['2015/11/19', 32, 'Topic 5'],
                    ['2015/11/20', 26, 'Topic 5'],
                    ['2015/11/21', 35, 'Topic 5'],
                    ['2015/11/22', 4, 'Topic 5'],
                    ['2015/11/23', 32, 'Topic 5'],
                    ['2015/11/24', 26, 'Topic 5'],
                    ['2015/11/25', 22, 'Topic 5'],
                    ['2015/11/26', 16, 'Topic 5'],
                    ['2015/11/27', 22, 'Topic 5'],
                    ['2015/11/28', 10, 'Topic 5'],
                    ['2015/11/08', 5, 'Topic 6'],
                    ['2015/11/09', 4, 'Topic 6'],
                    ['2015/11/10', 3, 'Topic 6'],
                    ['2015/11/11', 5, 'Topic 6'],
                    ['2015/11/12', 8, 'Topic 6'],
                    ['2015/11/13', 4, 'Topic 6'],
                    ['2015/11/14', 6, 'Topic 6'],
                    ['2015/11/15', 7, 'Topic 6'],
                    ['2015/11/16', 8, 'Topic 6'],
                    ['2015/11/17', 9, 'Topic 6'],
                    ['2015/11/18', 10, 'Topic 6'],
                    ['2015/11/19', 12, 'Topic 6'],
                    ['2015/11/20', 16, 'Topic 6'],
                    ['2015/11/21', 15, 'Topic 6'],
                    ['2015/11/22', 14, 'Topic 6'],
                    ['2015/11/23', 13, 'Topic 6'],
                    ['2015/11/24', 12, 'Topic 6'],
                    ['2015/11/25', 11, 'Topic 6'],
                    ['2015/11/26', 10, 'Topic 6'],
                    ['2015/11/27', 9, 'Topic 6'],
                    ['2015/11/28', 8, 'Topic 6']
                  ]
                }
              ]
            });
            this.charts.push(chart);
          }
        },
        beforeUnmount() {
          // Clean up charts
          this.charts.forEach(chart => {
            chart.dispose();
          });
        }
      };
      
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </body>
</html>